<template>
    <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
        <image
            v-if="!isError"
            :src="resource"
            :mode="mode"
            @error="onErrorHandler"
            @load="onLoadHandler"
            :lazy-load="lazyLoad"
            class="u-image__image"
            :show-menu-by-longpress="showMenuByLongpress"
            :style="{
                borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
            }"
        ></image>
        <view
            v-if="showLoading && loading"
            class="u-image__loading"
            :style="{
                borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
                backgroundColor: bgColor
            }"
        >
            <slot v-if="$slots.loading" name="loading" />
            <u-loading mode="flower"></u-loading>
        </view>
        <view
            v-if="showError && isError && !loading"
            class="u-image__error"
            :style="{
                borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
            }"
        >
            <slot v-if="$slots.error" name="error" />
            <image v-else src="/static/images/placeholder.png" class="placholder" mode="aspectFill"></image>
        </view>
    </view>
</template>

<script>
// #ifdef APP-PLUS
import download from './download.ts'
import { resolveFile } from './index'
// #endif

/**
 * ImgCache 图片缓存
 * @description APP端图片缓存
 * @tutorial https://ext.dcloud.net.cn/plugin?id=2515
 * @property {string} src 图片资源地址
 * @property {string} mode 图片裁剪、缩放的模式
 * @property {boolean} lazyLoad 是否图片懒加载
 * @property {boolean} fade-show 图片显示动画效果
 * @property {boolean} webp 默认不解析 webP 格式，只支持网络资源
 * @property {boolean} show-menu-by-longpress 开启长按图片显示识别小程序码菜单
 * @property {string} dir 缓存的文件目录，文件夹开头不能有_
 * @property {string} width 宽度，单位任意，如果为数值，则为 rpx 单位
 * @property {string} height 高度，单位任意，如果为数值，则为 rpx 单位
 * @property {object} custom-style 自定义样式
 * @event {Function} click 点击图片
 * @event {Function} error 错误发生
 * @event {Function} load 图片载入完毕
 * @example <img-cache src="https://example.com/image.png"></img-cache>
 */
export default {
    name: 'ImgCache',
    props: {
        src: {
            type: String
        },
        mode: {
            type: String,
            default: 'scaleToFill'
        },
        lazyLoad: {
            type: Boolean,
            default: false
        },
        webp: {
            type: Boolean,
            default: false
        },
        showMenuByLongpress: {
            type: Boolean,
            default: false
        },
        dir: {
            type: String,
            default: 'imgcache'
        },
        width: {
            type: [String, Number]
        },
        height: {
            type: [String, Number],
            default: 'auto'
        },
        customStyle: {
            type: Object,
            default: () => ({})
        },
        borderRadius: {
            type: [String, Number],
            default: 0
        },
        shape: {
            type: String,
            default: 'square'
        },
        // 是否需要淡入效果
        fade: {
            type: Boolean,
            default: true
        },
        // 加载中的图标，或者小图片
        loadingIcon: {
            type: String,
            default: 'photo'
        },
        // 加载失败的图标，或者小图片
        errorIcon: {
            type: String,
            default: 'error-circle'
        },
        // 是否显示加载中的图标或者自定义的slot
        showLoading: {
            type: Boolean,
            default: true
        },
        // 是否显示加载错误的图标或者自定义的slot
        showError: {
            type: Boolean,
            default: true
        },
        // 只支持网络资源，只对微信小程序有效
        webp: {
            type: Boolean,
            default: false
        },
        // 过渡时间，单位ms
        duration: {
            type: [String, Number],
            default: 500
        },
        // 背景颜色，用于深色页面加载图片时，为了和背景色融合
        bgColor: {
            type: String,
            default: '#f3f4f6'
        },
        // 将图片 对象 转为 absolute  首页店铺装修 需要
        absolute: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            resource: '',
            // 图片是否加载错误，如果是，则显示错误占位图
            isError: false,
            // 初始化组件时，默认为加载中状态
            loading: true,
            // 不透明度，为了实现淡入淡出的效果
            opacity: 1,
            // 过渡时间，因为props的值无法修改，故需要一个中间值
            durationTime: this.duration,
            // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
            backgroundStyle: {}
        }
    },
    computed: {
        wrapStyle() {
            let style = {}
            // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
            style.width = this.$u.addUnit(this.width)
            style.height = this.$u.addUnit(this.height)
            // 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
            style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius)
            // 如果设置圆角，必须要有hidden，否则可能圆角无效
            style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible'
            if (this.fade) {
                style.opacity = this.opacity
                style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`
            }
            if (this.absolute) {
                style.position = 'absolute'
                style.left = 0
                style.right = 0
                style.top = 0
                style.bottom = 0
            }
            return style
        }
    },
    watch: {
        src: {
            immediate: true,
            handler(n) {
                if (!n) {
                    this.isError = true
                    this.loading = false
                } else {
                    this.isError = false
                    this.init()
                }
            }
        }
    },
    methods: {
        // 初始化
        init() {
            // #ifdef APP-PLUS
            this.fnCache()
            // #endif

            // #ifndef APP-PLUS
            this.setSrc()
            // #endif
        },
        // 获取缓存
        fnCache() {
            const url = this.src // 赋值到新变量，避免下载时 src 更改，从而网络地址和本地地址图片不一致
            if (!/^https?:\/\//.test(url)) return this.setSrc() // 判断是否网络地址 如果是本地缓存 则直接显示图片
            uni.$u.$imHandler.img
                .getCache(url)
                .then(async rows => {
                    // 不存在缓存
                    if (rows && rows.length > 0) {
                        const path = rows[0].local
                        if (await resolveFile(path)) return this.setSrc(path) // 判断本地文件是否存在 如果存在则显示本地文件
                    }else{
						const local = await download(url, this.dir) // 下载文件
						if (local) uni.$u.$imHandler.img.saveOrUpdate({ url, local })
						this.setSrc()
					}
                })
                .catch(e => {
                    console.log('e: ' + e)
                })
        },
        // 设置图片资源地址
        setSrc(src) {
            this.resource = src || this.src
        },
        // 发送事件
        fnEvent(emit, event) {
            this.$emit(emit, event)
        },
        onClick() {
            this.$emit('click')
        },
        onLoadHandler() {
            this.loading = false
            this.isError = false
            this.$emit('load')
            // 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
            // 否则无需fade效果时，png图片依然能看到下方的背景色
            if (!this.fade) return this.removeBgColor()
            // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
            this.opacity = 0
            // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
            // 到图片展示的过程中的淡入效果
            this.durationTime = 0
            // 延时50ms，否则在浏览器H5，过渡效果无效
            setTimeout(() => {
                this.durationTime = this.duration
                this.opacity = 1
                setTimeout(() => {
                    this.removeBgColor()
                }, this.durationTime)
            }, 50)
        },
        onErrorHandler(err) {
            this.loading = false
            this.isError = true
            this.$emit('error', err)
        },
        // 移除图片的背景色
        removeBgColor() {
            // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
            this.backgroundStyle = {
                backgroundColor: 'transparent'
            }
        }
    }
}
</script>
<style scoped lang="scss">
@import './style.components.scss';

.u-image {
    position: relative;
    transition: opacity 0.5s ease-in-out;

    &__image {
        width: 100%;
        height: 100%;
        display: block;
    }

    &__loading,
    &__error {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include vue-flex;
        align-items: center;
        justify-content: center;
        background-color: $u-bg-color;
        color: $u-tips-color;
        font-size: 46rpx;
        overflow: hidden;
    }
    .placholder {
        width: 100%;
        height: 100%;
    }
}
</style>
